<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试事件</title>
</head>
<body>
<!--addEventListener(event, function, useCapture);
第一个参数是事件的类型（如“click”或“mousedown”）
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
-->
<div id="divContainer" style="width: 300px;height: 300px;background: pink">
  <button id="buttonComponent">按钮</button>
</div>
<script>
  /*默认行为是冒泡行为，执行顺序：先执行button点击，后执行div点击。*/
 /* document.getElementById('divContainer').addEventListener('click', function() {
    alert('div点击')
  }, false)
  document.getElementById('buttonComponent').addEventListener('click', function() {
    alert('button点击')
  }, false)*/

  /*默认行为是冒泡行为，执行顺序：先执行div点击，后执行button点击。*/
  document.getElementById('divContainer').addEventListener('click', function() {
    alert('div点击')
  }, true)
  document.getElementById('buttonComponent').addEventListener('click', function() {
    alert('button点击')
  }, true)
</script>
</body>
</html>